import { Card } from "antd"
import style from "./index.module.css"
import { reqGetHSUser } from "../../api/user"
import { useEffect, useState } from "react"
export const Score = () => {
  const [useList, setUserList] = useState<JSX.Element[]>([])
  const choiceItem = (i: number) => {
    if (i == 0) {
      return (
        <div
          className="iconfont icon-jiangbei-"
          style={{ color: "#FFD700" }}
        ></div>
      )
    } else if (i == 1) {
      return (
        <div
          className="iconfont icon-jiangbei-"
          style={{ color: "#C0C0C0" }}
        ></div>
      )
    } else if (i == 2) {
      return (
        <div
          className="iconfont icon-jiangbei-"
          style={{ color: "#CD7F32" }}
        ></div>
      )
    }
    return i + 1
  }
  const getUsers = async () => {
    const { data } = await reqGetHSUser()
    const arr = data.map((item, index) => (
      <div className={style.item} key={item._id}>
        <div className={style.index}>{choiceItem(index)}</div>
        <img src={import.meta.env.VITE_APP_BASE_SERVICE + item.avatar} alt="" />
        <div className={style.nick}>{item.nickname}</div>
        <div className={style.score}>{item.points}</div>
      </div>
    ))
    setUserList(arr)
  }
  useEffect(() => {
    getUsers()
  }, [])
  return <Card title="积分排行榜">{useList}</Card>
}
